import logo from './logo.svg';
import './App.css';
import {connect,Provider} from 'react-redux';
import React from 'react';
import 'antd-mobile/dist/antd-mobile.css';
import {Button} from 'antd-mobile';

// 在APP这个根组件页面使用redux
// 将state映射到props上
function mapStateToProps(state){
  return {
    value:state.num
  }
};
// 将修改store到方法映射到props上，默认会传入store里到dispach里
function mapDispatchToprops(dispatch) { 
    return {
      onAddClick:()=>{dispatch({type:'add'})},
      onAddNumClick:()=>{dispatch({type:'addNum',num:9})}
    }
 }
 
 class Counter extends React.Component{
   constructor(props){
     super(props);
   };
   render(){
     console.log(this.props);
    //  获取映射到props中到store数据
    let StoreNum = this.props.value;
    //  获取映射到props中修改store数据到方法
    let onAddClick = this.props.onAddClick;
    let onAddNumClick= this.props.onAddNumClick;
    //以上过程等同于vuex中到mapMutation和mapState
     return (
       <div className='App'>
         <h5>计数数量:{StoreNum}</h5>
         <button onClick={onAddClick}>计数+1</button>
         <Button onClick={onAddNumClick}>计数+9</Button>
       </div>
     )
   }
 }

//  将state和修改数据dispatch方法映射到组件上结合
const App =connect(
  mapStateToProps,
  mapDispatchToprops
)(Counter)
export default App;
